<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" href="/css/reset.css" type="text/css">
    <link rel="stylesheet" href="/css/answer.css" type="text/css">
    <link rel="stylesheet" href="/css/checkPoint.css" type="text/css">
    <title>问卷调查</title>
</head>
<body>
<div id="app" >
    <!-- 单选题 -->
    {foreach $res as $k=>$v}
    {if condition="$k==0"}
    <div class="fuji" style="display: block" name="{$k}">
    {else /}
    <div class="fuji" style="display: none" name="{$k}">
    {/if}
        <!--单选-->
        {if condition="$v.status == 1"}
        <div class="title-box">
            【单选题】{$v.name} ( )
        </div>
        <ul class="ask-box">
            {foreach $v.option as $i=>$j}
            <li class="ask-content">
                <span class="serial-number option" keys="{$k}" name="{$j}" type="{$v.id}">{$i == 0 ? 'A':($i == 1 ? 'B':($i == 2 ? 'C':($i == 3 ? 'D':($i == 4 ? 'E':'F'))))}</span>
                <span class="ask-text">
							{$j}
						</span>
            </li>
            {/foreach}
            <div class="other-box qita"  style="display: none">
					<textarea placeholder="请输入问题描述..." keys="{$k}" class="qt"></textarea>
            </div>
        </ul>
        {/if}
        <!--多选-->
        {if condition="$v.status == 2"}
        <div class="title-box">
            【多选题】{$v.name} ( )   最多选择{$v.max}项
        </div>
        <ul class="ask-box">
            {foreach $v.option as $i=>$j}
            <li class="ask-content">
                <span class="serial-number options" keys="{$k}" name="{$j}" max="{$v.max}" type="{$v.id}">{$i == 0 ? 'A':($i == 1 ? 'B':($i == 2 ? 'C':($i == 3 ? 'D':($i == 4 ? 'E':'F'))))}</span>
                <span class="ask-text">
							{$j}
						</span>
            </li>
            {/foreach}
        </ul>
        <div class="other-box qitas" style="display: none">
					<textarea placeholder="请输入问题描述..." keys="{$k}" class="qt"></textarea>
        </div>
        {/if}
        <!--填空-->
        {if condition="$v.status == 3"}
        <div class="title-box">
            【填空题】{$v.name}
        </div>
        {foreach $v.option as $i=>$j}
        <div class="title-box">
            {$j}
        </div>
        <div class="other-box">
            <textarea placeholder="请输入问题描述..." keys="{$k}" name="{$i}" type="{$v.id}" class="qts"></textarea>
        </div>
        {/foreach}
                    　　　　

        {/if}
        <!--下拉-->
        {if condition="$v.status == 4"}
        <div class="title-box">
            【下拉题】{$v.name} ( )
        </div>
        <div class="selectask-box">

            <select class="choice" keys="{$k}" type="{$v.id}">
                <option name="{$j}"  value="" >请选择</option>
                {foreach $v.option as $i=>$j}
                <option name="{$j}"  value="{$j}" >{$j}</option>
                {/foreach}
                　　　　
            </select>
        </div>
        {/if}
        <!--评分-->
        {if condition="$v.status == 5"}
        <p class="title_1"><span class="type">【打分题】</span>{$v.name}</p>
        <p class="title_2">
            <i class="line line_l"></i>
            <span>医院服务人员打分</span>
            <i class="line line_r"></i>
        </p>
        <div class="start-box">
            <div class="start"
                 :class="topic.points>=1 ? 'allstart' : topic.points == 0.5 ? 'halfstart' : ''">
                <span class="le-satrt" @click="clickStart(0.5,{$k},{$v.id})"></span>
                <span class="ri-satrt" @click="clickStart(1,{$k},{$v.id})"></span>
            </div>
            <div class="start"
                 :class="topic.points>=2 ? 'allstart' : topic.points == 1.5 ? 'halfstart' : ''">
                <span class="le-satrt" @click="clickStart(1.5,{$k},{$v.id})"></span>
                <span class="ri-satrt" @click="clickStart(2,{$k},{$v.id})"></span>
            </div>
            <div class="start"
                 :class="topic.points>=3 ? 'allstart' : topic.points == 2.5 ? 'halfstart' : ''">
                <span class="le-satrt" @click="clickStart(2.5,{$k},{$v.id})"></span>
                <span class="ri-satrt" @click="clickStart(3,{$k},{$v.id})"></span>
            </div>
            <div class="start"
                 :class="topic.points>=4 ? 'allstart' : topic.points == 3.5 ? 'halfstart' : ''">
                <span class="le-satrt" @click="clickStart(3.5,{$k},{$v.id})"></span>
                <span class="ri-satrt" @click="clickStart(4,{$k},{$v.id})"></span>
            </div>
            <div class="start"
                 :class="topic.points>=5 ? 'allstart' : topic.points == 4.5 ? 'halfstart' : ''">
                <span class="le-satrt" @click="clickStart(4.5,{$k},{$v.id})"></span>
                <span class="ri-satrt" @click="clickStart(5,{$k},{$v.id})"></span>
            </div>
        </div>

        {/if}
        <div class="line"></div>
        {if condition="($k > 0) AND ($count > $k)"}
        <div class="btn-box">
            <span class="front-btn shang" name="{$k}">上一题</span>
            <span class="next-btn xia"  name="{$k}">下一题</span>
        </div>
        {/if}
        {if condition="($k == 0) AND ($count > 0)"}
        <div class="nextbtn-box" >
            <span class="bottom-btn xia" name="{$k}">下一题</span>
        </div>
        {/if}
        {if condition="($k == 0) AND ($count == 0)"}
        <div class="nextbtn-box" >
            <div class="upload btn tijiao">提交</div>
        </div>
        {/if}
        {if condition="($k > 0) AND ($count == $k)"}
        <div class="btn-box">
            <a class="last_btn btn shang" name="{$k}">上一题</a>
            <div class="upload btn tijiao">提交</div>
        </div>
        {/if}
    </div>
    {/foreach}
</div>
</div>
<script src="/js/rem.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/layer/layer.js"></script>

<script>
    var id = {$id};
    var params = {};
    var vue = new Vue({
        el: '#app',
        data: {
            askParam: 1, //答题序号,目前默认只有四道题
            checkParam: 1, //暂定1为单选,2为多选,3为下拉选项,4为打分题

            topic://打分题
                {
                    title_1: '我院接待人员可以打几分？',
                    title_2: '医院服务人员打分',
                    points: 0
                },
            cont: 3.5,
        },
        //进入页面的请求
        created() {
        },
        methods: {



            //打分题
            clickStart( cont,k,id) { //cont是分数
                this.topic.points = cont
                var arr = {}
                arr['id'] = id
                arr['answer'] = cont
                params[k] = arr
                console.log(params)
            },


        },
    })

    $('.option').click(function () {

        var k = $(this).attr('keys')
        console.log(k)
        var that = $(this)
        if($(this).hasClass('active')){
            $(this).removeClass('active')
            params.splice(k,1)
            if($(this).attr('name') == '其他'){
                $('.qita').css('display','none')
            }
        }else{
            $('.option').removeClass("active")
            $(this).addClass('active')
            if(params.hasOwnProperty(k)){
                if(that.attr('name') == '其他'){
                    params[k]['answer'] = ''
                }else{
                    params[k]['answer'] = that.attr('name')
                }
            }else{
                var arr={}
                if(that.attr('name') == '其他'){
                    arr['answer'] = ''
                }else{
                    arr['answer'] = that.attr('name')
                }
                arr['id'] = that.attr('type')
                params[k] = arr
            }
            if(that.attr('name') == '其他'){
                $('.qita').css('display','block')
            }else{
                $('.qita').css('display','none')
            }
        }


        console.log(params)
        //$(this).siblings().removeClass("active")

    })
    $('.qt').blur(function () {
        var k = $(this).attr('keys')
        var val = $(this).val()
        if(val){
            params[k]['qita'] = val;
        }

    })
    $('.qts').blur(function () {
        var k = $(this).attr('keys')
        var ks = $(this).attr('name')
        var val = $(this).val()
        var arr = {}

        if(val){
            if(params.hasOwnProperty(k)){
                params[k]['qts'][ks] = val
            }else{
                arr['qts'] = {}
                arr['id'] = $(this).attr('type')
                arr['qts'][ks] = val
                params[k] = arr;
            }

        }
        console.log(params);
    })
    $('.options').click(function () {

        var k = $(this).attr('keys')
        var count = $(this).attr('max')
        var that = $(this)
        var newarr = {}
        if($(this).hasClass('active')){
            $(this).removeClass('active')
            params[k]['answer'] = params[k]['answer'].replace('/'+that.attr('name'),"");
            //params.splice(k,1)
            if($(this).attr('name') == '其他'){
                $('.qita').css('display','none')
            }
        }else{
            if(params.hasOwnProperty(k)){
                newarr = params[k]['answer'].split('/');
                console.log(newarr.length)
                if(newarr.length < count){
                    $(this).addClass('active')
                    if(params.hasOwnProperty(k)){

                        if(that.attr('name') != '其他'){
                            params[k]['answer'] = params[k]['answer'] + '/' +that.attr('name')
                        }

                    }else{
                        var arr={}
                        if(that.attr('name') == '其他'){
                            arr['answer'] = ''
                        }else{
                            arr['answer'] = that.attr('name')
                        }
                        arr['id'] = that.attr('type')
                        params[k] = arr
                    }
                    if(that.attr('name') == '其他'){
                        $('.qitas').css('display','block')
                    }else{
                        $('.qitas').css('display','none')
                    }
                }
            }else{
                $(this).addClass('active')
                if(params.hasOwnProperty(k)){

                    if(that.attr('name') != '其他'){
                        params[k]['answer'] = params[k]['answer'] + '/' +that.attr('name')
                    }

                }else{
                    var arr={}
                    if(that.attr('name') == '其他'){
                        arr['answer'] = ''
                    }else{
                        arr['answer'] = that.attr('name')
                    }
                    arr['id'] = that.attr('type')
                    params[k] = arr
                }
                if(that.attr('name') == '其他'){
                    $('.qitas').css('display','block')
                }else{
                    $('.qitas').css('display','none')
                }
            }
            //$('.option').removeClass("active")

        }


        console.log(params)
        //$(this).siblings().removeClass("active")

    })
    $('.choice').change(function () {
        var k = $(this).attr('keys')
        var id = $(this).attr('type')
        var name = $(this).val()
        var arr = {}
        arr['id'] = id
        arr['answer'] = name
        params[k] = arr
        console.log(params)
    })
    $('.xia').click(function () {
        var k = $(this).attr('name')

        $(".fuji").each(function(){

            if($(this).attr('name') == parseInt(k)+1){
                $(this).css('display','block')
            }else{
                $(this).css('display','none')
            }
        });
    })
    $('.shang').click(function () {
        var k = $(this).attr('name')

        $(".fuji").each(function(){

            if($(this).attr('name') == parseInt(k)-1){
                $(this).css('display','block')
            }else{
                $(this).css('display','none')
            }
        });
    })
    $('.tijiao').click(function () {
        console.log(JSON.stringify( params ))
        $.ajax({
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/index/surey/answerAdd?id=" + id ,//url
            data: params,
            success: function (data) {
                if(data == 200){
                    window.location = "/index/surey/over"
                }else{
                    layer.msg('提交失败！');
                }
            },
            error : function() {
                alert("异常！");
            }
        })
    })
</script>

</body>
</html>
